<template>
    <div class="NotFound">
        <div>
            <h1>页面走丢了(╥﹏╥)</h1>
            <div class="btn">
                <router-link to="/">返回首页</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NotFound"
    }

</script>

<style scoped>
    .NotFound {
        background-image: url("../assets/images/Bahamas.jpg");
        background-size: cover;
        width: 100%;
        height: 100vh;
        text-align: center;
    }
    .NotFound h1 {
        margin: 0;
        padding-top: 10vh;
        width: 100%;
        height: 100px;
        font-size: 80px;
        color: #fafafa;
        text-shadow: 0 0 5px #FF0000, 0 0 5px #6bf403;
    }
    .btn{
        margin-top: 20vh;
    }
    .router-link-active{
        padding: 64px 16px;
        font-size: 32px;
        color: #fafafa;
        text-shadow: 0 0 5px #FF0000, 0 0 5px #6bf403;
        text-decoration:none;
        background-color: rgb(135,206,255);
        border-radius: 50%;
        border: 5px #fafafa solid;
    }
    .router-link-active:hover{
        background-color: rgb(135,225,255);
    }
</style>
